<template>
  <div class="detail signUp" v-if="item">
    <div class="goodslist">
      <ul>
        <li>
          <div class="relative">
            <img v-bind:src="item.imageUrl"/>
            <div class="labelArr flex">
              <i class="icon icon-love"></i> <span>{{item.love}}</span>
            </div>
          </div>
          <div class="desc">
            <p class="title">{{item.title}}</p>
            <div class="flex">
              <div>
                <div class="flex  flex-start">
                  <i class="icon icon-clock"></i> <span>{{item.timeStamp}}</span>
                </div>
                <div class="flex  flex-start">
                  <i class="icon icon-address"></i><span>{{item.address}}</span>
                </div>
              </div>
              <div style="align-self:flex-end"><span class="price">￥{{item.price}}</span></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="detail-content">
      <div class="Order">
        <div class="orderinfo flex-verticle nopadding">
          <!--<div class="sendway coupon"  style="margin-top:0" >
            <label>
              <q-checkbox v-model="checked"></q-checkbox>
              我想带一个好友参加本次活动<span class="free">（免费）</span>
            </label>
            <input type="text" placeholder="请输入您朋友的姓名" v-model="user.name" />
            <input type="text" placeholder="请输入您朋友的手机号码"  v-model="user.tel" />
          </div>-->
          <div class="sendway coupon" @click="isshow = true">
            <p class="fl">优惠</p>
            <div class="fr">
              <div><span class="usecoupon">{{selectedCoupon ? selectedCoupon.name : '使用优惠券'}}</span> <i
                class="icon "></i></div>
            </div>
          </div>
          <div class="sendway invite">
            支付成功后可前往活动订单页面邀请3位好友免费参加本次活动
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="flex">
        <div class="f1 align-self">
          <span>￥{{totalPrice}}</span>
        </div>
        <!--<div class="f2 align-self">
          <span>邀请他人代付</span>
        </div>-->
        <div class="f3 align-self" @click="gotoPay()"> 立即支付 </div>
      </div>
    </footer>
    <v-coupon :isshow="isshow" :activityId="item.pid" :selectedCoupon="selectedCoupon"
              v-on:hideDialog="hideDialog"></v-coupon>
    <div class="blackbg" v-if="isshow" @click="isshow = false"></div>
  </div>
</template>
<script>
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import {setWechatTitle, AlertDialog} from '../../common/js/common'
  import Coupon from '../couponCommon/index'
  import router from '../../router'
  export default({
    data () {
      return {
        'showLoading': false,
        'item': null,
        'pid': '',
        'checked': false,
        'isshow': false,
        'user': {
          'name': '',
          'tel': ''
        },
        totalPrice: '',
        selectedCoupon: null
      }
    },
    created () {
      this.pid = this.$route.params.id
      if (!this.pid) {
        AlertDialog('警告', '请选择您要看的旅游项目')
      }
      this.fetchData()
    },
    methods: {
      fetchData () {
        /* 根据JouneryId获取旅游的详情 */
        let param = {pid: this.pid}
        this.showLoading = true
        let result = HttpRequest(linklist.activityDetailUrl, param, 2)
        result.then((response) => {
          let body = response.body
          if (body.code === 0) {
            this.item = body.data
            this.$nextTick(function () {
              setWechatTitle(this.item.title)
            })
            let oneday = 3600 * 24 * 1000
            let diff = this.item.endTime - this.item.startTime - oneday
            let startdate = new Date(this.item.startTime)
            let enddate = new Date(this.item.endTime)
            let startTime = startdate.getMonth() + '月' + startdate.getDate() + '日 ' + startdate.getHours() + ':' + startdate.getSeconds()
            let endTime = ''
            if (diff > 0) {
              // 开始时间和截至时间大于一天
              endTime = enddate.getMonth() + '月' + enddate.getDate() + '日 ' + enddate.getHours() + ':' + enddate.getSeconds()
            }
            else {
              // 开始时间和截至时间在同一天
              endTime = enddate.getHours() + ':' + enddate.getSeconds()
            }
            this.item.timeStamp = startTime + '~' + endTime
            this.totalPrice = this.item.price
          }
          else {
            AlertDialog('提示', body.msg)
          }
          this.showLoading = false
        }, (response) => {
          this.showLoading = false
          AlertDialog('提示', '获取详情失败，请稍后再试', '确定', true)
        }).catch((response) => {
          this.showLoading = false
          AlertDialog('提示', '获取详情失败，请稍后再试', '确定', true)
        })
      },
      gotoPay () {
        router.push({name: 'payment', query: {id: '123'}})
      },
      hideDialog () {
        if (arguments[0]) {
          this.selectedCoupon = arguments[0]
          let tprice = ((this.item.price * 100) - this.selectedCoupon.price * 100) / 100
          tprice = tprice > 0 ? tprice : 0
          this.totalPrice = tprice.toFixed(2)
        }
        this.isshow = false
      }
    },
    components: {
      'v-coupon': Coupon
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  @import "./style.styl"
  @import "../myOrder/addOrder.styl"
  .signUp .Order .orderinfo .sendway.invite
    margin-top 0
    border-top bordercolor
    setFontsize(12px)
    color redColor
</style>
